<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - Modbus监控系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 24px;
            color: #333;
        }

        .tab-bar {
            background: white;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: flex;
            overflow: hidden;
        }

        .tab-item {
            flex: 1;
            padding: 15px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
            border: none;
            border-bottom: 3px solid transparent;
            color: #666;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .tab-item:hover {
            background: #f8fafc;
            color: #3b82f6;
        }

        .tab-item.active {
            color: #3b82f6;
            border-bottom-color: #3b82f6;
            background: #eff6ff;
            font-weight: bold;
        }

        .settings-panel {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .panel-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e5e7eb;
        }

        .setting-section {
            margin-bottom: 35px;
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
            font-weight: 500;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 10px 15px;
            border: 2px solid #e5e7eb;
            border-radius: 5px;
            font-size: 14px;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #3b82f6;
        }

        .form-group .help-text {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .switch-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: #f8fafc;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .switch-label {
            font-size: 14px;
            color: #333;
        }

        .switch-label .sub-text {
            font-size: 12px;
            color: #999;
            margin-top: 3px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 26px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #10b981;
        }

        input:checked+.slider:before {
            transform: translateX(24px);
        }

        .btn {
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #3b82f6;
            color: white;
        }

        .btn-primary:hover {
            background: #2563eb;
        }

        .btn-secondary {
            background: #6b7280;
            color: white;
        }

        .btn-secondary:hover {
            background: #4b5563;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background: #dc2626;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
            margin-top: 30px;
        }

        .info-box {
            background: #eff6ff;
            border-left: 4px solid #3b82f6;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .info-box.warning {
            background: #fffbeb;
            border-left-color: #f59e0b;
        }

        .info-box.success {
            background: #f0fdf4;
            border-left-color: #10b981;
        }

        .system-info {
            background: #f8fafc;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .system-info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .system-info-row:last-child {
            border-bottom: none;
        }

        .system-info-label {
            color: #666;
            font-size: 14px;
        }

        .system-info-value {
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 顶部 -->
        <div class="header">
            <h1>⚙️ 系统设置</h1>
        </div>

        <!-- 标签栏导航 -->
        <div class="tab-bar">
            <button class="tab-item active" onclick="showPanel('general')">
                🏠 常规设置
            </button>
            <button class="tab-item" onclick="showPanel('modbus')">
                📡 Modbus 配置
            </button>
            <button class="tab-item" onclick="showPanel('database')">
                💾 数据库设置
            </button>
            <button class="tab-item" onclick="showPanel('system')">
                💻 系统信息
            </button>
            <button class="tab-item" onclick="showPanel('logs')">
                📝 操作日志
            </button>
        </div>

        <!-- 设置面板 -->
        <div class="settings-panel">
            <!-- 常规设置 -->
            <div id="general-panel">
                <div class="panel-title">🏠 常规设置</div>

                <div class="setting-section">
                    <div class="section-title">📋 基本信息</div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>系统名称</label>
                            <input type="text" value="Modbus 工业监控系统">
                        </div>
                        <div class="form-group">
                            <label>工作站名称</label>
                            <input type="text" value="主控制台-01">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>数据采集周期</label>
                        <select>
                            <option>0.5秒</option>
                            <option selected>1秒</option>
                            <option>2秒</option>
                            <option>5秒</option>
                            <option>10秒</option>
                        </select>
                        <div class="help-text">建议设置为 1 秒，过快可能增加设备负担</div>
                    </div>

                    <div class="form-group">
                        <label>实时数据保留时长</label>
                        <select>
                            <option>3天 (节省空间)</option>
                            <option selected>7天 (推荐)</option>
                            <option>15天</option>
                            <option>30天 (需要更多硬盘)</option>
                        </select>
                        <div class="help-text">超过保留期的原始数据将被自动清理，统计数据仍会保留</div>
                    </div>
                </div>

                <div class="setting-section">
                    <div class="section-title">🔔 通知设置</div>

                    <div class="switch-group">
                        <div class="switch-label">
                            启用桌面通知
                            <div class="sub-text">收到报警时显示系统通知</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <div class="switch-group">
                        <div class="switch-label">
                            启用声音提示
                            <div class="sub-text">报警时播放提示音</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>

                    <div class="switch-group">
                        <div class="switch-label">
                            启动时自动连接设备
                            <div class="sub-text">程序启动后自动连接所有已配置设备</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>

                <div class="action-buttons">
                    <button class="btn btn-secondary">重置</button>
                    <button class="btn btn-primary">保存设置</button>
                </div>
            </div>

            <!-- Modbus 配置 (隐藏) -->
            <div id="modbus-panel" style="display: none;">
                <div class="panel-title">📡 Modbus TCP 配置</div>

                <div class="info-box">
                    <strong>ℹ️ 提示：</strong> Modbus 设备的详细管理请在"设备管理"页面进行
                </div>

                <div class="setting-section">
                    <div class="section-title">⚙️ 通信参数</div>

                    <div class="form-group">
                        <label>默认端口</label>
                        <input type="number" value="502">
                        <div class="help-text">Modbus TCP 标准端口为 502</div>
                    </div>

                    <div class="form-group">
                        <label>连接超时 (秒)</label>
                        <input type="number" value="5">
                        <div class="help-text">尝试连接设备的最长等待时间</div>
                    </div>

                    <div class="form-group">
                        <label>读取超时 (毫秒)</label>
                        <input type="number" value="1000">
                        <div class="help-text">等待设备响应的最长时间</div>
                    </div>

                    <div class="form-group">
                        <label>重试次数</label>
                        <input type="number" value="3">
                        <div class="help-text">通信失败时的重试次数</div>
                    </div>
                </div>

                <div class="setting-section">
                    <div class="section-title">📊 寄存器配置</div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>温度寄存器起始地址</label>
                            <input type="number" value="0">
                        </div>
                        <div class="form-group">
                            <label>寄存器数量</label>
                            <input type="number" value="2">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>压力寄存器起始地址</label>
                            <input type="number" value="2">
                        </div>
                        <div class="form-group">
                            <label>寄存器数量</label>
                            <input type="number" value="2">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>流量寄存器起始地址</label>
                            <input type="number" value="4">
                        </div>
                        <div class="form-group">
                            <label>寄存器数量</label>
                            <input type="number" value="2">
                        </div>
                    </div>
                </div>

                <div class="action-buttons">
                    <button class="btn btn-secondary">恢复默认</button>
                    <button class="btn btn-primary">保存配置</button>
                </div>
            </div>

            <!-- 数据库设置 (隐藏) -->
            <div id="database-panel" style="display: none;">
                <div class="panel-title">💾 数据库设置</div>

                <div class="info-box success">
                    <strong>✓ 数据库连接正常</strong><br>
                    路径: C:\ModbusData\modbus_monitor.db
                </div>

                <div class="setting-section">
                    <div class="section-title">📊 数据库信息</div>

                    <div class="system-info">
                        <div class="system-info-row">
                            <span class="system-info-label">数据库类型</span>
                            <span class="system-info-value">SQLite 3</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">数据库大小</span>
                            <span class="system-info-value">125.6 MB</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">数据记录数</span>
                            <span class="system-info-value">1,258,960 条</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">最早记录</span>
                            <span class="system-info-value">2025-07-31 08:00:00</span>
                        </div>
                    </div>
                </div>

                <div class="setting-section">
                    <div class="section-title">🛠️ 数据库维护</div>

                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <button class="btn btn-primary" onclick="optimizeDatabase()">
                            🔄 优化数据库
                            <span style="font-size: 12px; color: #999; margin-left: 10px;">回收空间、重建索引</span>
                        </button>
                        <button class="btn btn-primary" onclick="backupDatabase()">
                            📦 备份数据库
                            <span style="font-size: 12px; color: #999; margin-left: 10px;">创建完整备份文件</span>
                        </button>
                        <button class="btn btn-secondary" onclick="restoreDatabase()">
                            📥 恢复数据库
                            <span style="font-size: 12px; color: #999; margin-left: 10px;">从备份恢复（需停止采集）</span>
                        </button>
                        <button class="btn btn-danger" onclick="cleanupOldData()">
                            🗑️ 手动清理旧数据
                            <span style="font-size: 12px; color: #999; margin-left: 10px;">立即执行清理任务</span>
                        </button>
                    </div>
                </div>

                <div class="info-box">
                    <strong>💡 提示：</strong> 系统每天凌晨2点自动清理旧数据，无需手动操作
                </div>

                <div class="info-box warning">
                    <strong>⚠️ 警告：</strong> 清理/恢复操作不可恢复，请先备份数据库
                </div>
            </div>


            <!-- 系统信息 (隐藏) -->
            <div id="system-panel" style="display: none;">
                <div class="panel-title">💻 系统信息</div>

                <div class="setting-section">
                    <div class="section-title">📋 软件信息</div>

                    <div class="system-info">
                        <div class="system-info-row">
                            <span class="system-info-label">软件名称</span>
                            <span class="system-info-value">Modbus 工业监控系统</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">版本号</span>
                            <span class="system-info-value">v1.0.0</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">构建日期</span>
                            <span class="system-info-value">2025-10-29</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">Qt 版本</span>
                            <span class="system-info-value">Qt 6.5.3</span>
                        </div>
                    </div>
                </div>

                <div class="setting-section">
                    <div class="section-title">💻 运行环境</div>

                    <div class="system-info">
                        <div class="system-info-row">
                            <span class="system-info-label">操作系统</span>
                            <span class="system-info-value">Windows 10 Pro</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">CPU</span>
                            <span class="system-info-value">Intel Core i7-9700</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">内存使用</span>
                            <span class="system-info-value">156 MB / 16 GB</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">运行时长</span>
                            <span class="system-info-value">2小时 35分</span>
                        </div>
                    </div>
                </div>

                <div class="setting-section">
                    <div class="section-title">📄 许可信息</div>

                    <div class="system-info">
                        <div class="system-info-row">
                            <span class="system-info-label">许可类型</span>
                            <span class="system-info-value">开源 MIT License</span>
                        </div>
                        <div class="system-info-row">
                            <span class="system-info-label">开发者</span>
                            <span class="system-info-value">工业自动化团队</span>
                        </div>
                    </div>
                </div>

                <div style="display: flex; gap: 10px;">
                    <button class="btn btn-primary">检查更新</button>
                    <button class="btn btn-secondary" onclick="showPanel('logs')">查看日志</button>
                    <button class="btn btn-secondary">关于</button>
                </div>
            </div>

            <!-- 操作日志 (隐藏) -->
            <div id="logs-panel" style="display: none;">
                <div class="panel-title">📝 操作日志</div>

                <div class="setting-section">
                    <div
                        style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <div class="section-title">📋 系统操作记录</div>
                        <div style="display: flex; gap: 10px;">
                            <select style="padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
                                <option>全部操作</option>
                                <option>设备管理</option>
                                <option>数据导出</option>
                                <option>配置修改</option>
                                <option>系统维护</option>
                            </select>
                            <button class="btn btn-danger" onclick="clearLogs()">🗑️ 清空日志</button>
                        </div>
                    </div>

                    <div
                        style="background: #f8fafc; border-radius: 8px; padding: 15px; max-height: 500px; overflow-y: auto;">
                        <!-- 日志条目 -->
                        <div style="border-bottom: 1px solid #e5e7eb; padding: 12px 0;">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <span style="color: #10b981; font-weight: bold;">✓ 成功</span>
                                    <span style="margin: 0 10px; color: #666;">|</span>
                                    <span style="font-weight: 500;">添加设备</span>
                                </div>
                                <span style="color: #999; font-size: 13px;">2025-10-29 15:23:18</span>
                            </div>
                            <div style="margin-top: 5px; color: #666; font-size: 14px;">
                                用户: <strong>admin</strong> · 设备: <strong>PLC_01</strong> (192.168.1.100:502)
                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #e5e7eb; padding: 12px 0;">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <span style="color: #10b981; font-weight: bold;">✓ 成功</span>
                                    <span style="margin: 0 10px; color: #666;">|</span>
                                    <span style="font-weight: 500;">导出数据</span>
                                </div>
                                <span style="color: #999; font-size: 13px;">2025-10-29 14:35:08</span>
                            </div>
                            <div style="margin-top: 5px; color: #666; font-size: 14px;">
                                用户: <strong>operator</strong> · 文件: <strong>modbus_data_20251029.csv</strong> (2,160
                                条记录)
                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #e5e7eb; padding: 12px 0;">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <span style="color: #10b981; font-weight: bold;">✓ 成功</span>
                                    <span style="margin: 0 10px; color: #666;">|</span>
                                    <span style="font-weight: 500;">修改配置</span>
                                </div>
                                <span style="color: #999; font-size: 13px;">2025-10-29 14:12:45</span>
                            </div>
                            <div style="margin-top: 5px; color: #666; font-size: 14px;">
                                用户: <strong>admin</strong> · 配置项: <strong>数据采集周期</strong> (1秒 → 2秒)
                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #e5e7eb; padding: 12px 0;">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <span style="color: #10b981; font-weight: bold;">✓ 成功</span>
                                    <span style="margin: 0 10px; color: #666;">|</span>
                                    <span style="font-weight: 500;">备份数据库</span>
                                </div>
                                <span style="color: #999; font-size: 13px;">2025-10-29 10:05:32</span>
                            </div>
                            <div style="margin-top: 5px; color: #666; font-size: 14px;">
                                系统自动任务 · 文件: <strong>modbus_20251029_100532.db</strong> (125.6 MB)
                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #e5e7eb; padding: 12px 0;">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <span style="color: #ef4444; font-weight: bold;">✗ 失败</span>
                                    <span style="margin: 0 10px; color: #666;">|</span>
                                    <span style="font-weight: 500;">连接设备</span>
                                </div>
                                <span style="color: #999; font-size: 13px;">2025-10-29 09:15:22</span>
                            </div>
                            <div style="margin-top: 5px; color: #666; font-size: 14px;">
                                用户: <strong>admin</strong> · 设备: <strong>PLC_03</strong> (192.168.1.102:502)
                            </div>
                            <div style="margin-top: 5px; color: #ef4444; font-size: 13px;">
                                错误: 连接超时 - 无法访问目标主机
                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #e5e7eb; padding: 12px 0;">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <span style="color: #10b981; font-weight: bold;">✓ 成功</span>
                                    <span style="margin: 0 10px; color: #666;">|</span>
                                    <span style="font-weight: 500;">删除设备</span>
                                </div>
                                <span style="color: #999; font-size: 13px;">2025-10-28 16:45:10</span>
                            </div>
                            <div style="margin-top: 5px; color: #666; font-size: 14px;">
                                用户: <strong>admin</strong> · 设备: <strong>PLC_04</strong> (已删除历史数据 5,420 条)
                            </div>
                        </div>

                        <div style="padding: 12px 0;">
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div>
                                    <span style="color: #10b981; font-weight: bold;">✓ 成功</span>
                                    <span style="margin: 0 10px; color: #666;">|</span>
                                    <span style="font-weight: 500;">清理旧数据</span>
                                </div>
                                <span style="color: #999; font-size: 13px;">2025-10-28 02:00:05</span>
                            </div>
                            <div style="margin-top: 5px; color: #666; font-size: 14px;">
                                系统自动任务 · 删除 856,320 条实时数据，释放空间 38.5 MB
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 15px; text-align: center; color: #999; font-size: 13px;">
                        显示最近 7 天的操作日志 · 共 156 条记录
                    </div>
                </div>

                <div class="info-box">
                    <strong>💡 提示：</strong> 操作日志永久保存，可用于审计追溯和故障排查
                </div>
            </div>
        </div>
    </div>

    <script>
        function showPanel(panelName) {
            // 隐藏所有面板
            const panels = ['general', 'modbus', 'database', 'system', 'logs'];
            panels.forEach(p => {
                document.getElementById(p + '-panel').style.display = 'none';
            });

            // 显示选中的面板
            document.getElementById(panelName + '-panel').style.display = 'block';

            // 更新标签栏状态
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');
        }

        function clearLogs() {
            if (confirm('⚠️ 确定要清空所有操作日志吗？\n\n此操作不可恢复！')) {
                alert('操作日志已清空');
            }
        }

        // 数据库维护功能
        function optimizeDatabase() {
            if (confirm('优化数据库会回收空间并重建索引，可能需要几分钟时间。\n期间将暂停数据采集，是否继续？')) {
                alert('数据库优化中...\n\n✓ 停止数据采集\n✓ 执行 VACUUM\n✓ 重建索引\n\n优化完成！数据库大小从 125.6MB 减少到 95.2MB');
            }
        }

        function backupDatabase() {
            const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
            const backupFile = `modbus_backup_${timestamp}.db`;
            alert(`数据库备份成功！\n\n备份文件：${backupFile}\n保存路径：C:/ModbusData/backup/\n文件大小：125.6 MB`);
        }

        function restoreDatabase() {
            if (confirm('⚠️ 警告：恢复数据库会覆盖当前所有数据！\n\n请确保：\n1. 已停止数据采集\n2. 确认备份文件完整\n3. 当前数据已备份\n\n是否继续？')) {
                alert('请选择备份文件...\n\n（实际应用中会弹出文件选择对话框）');
            }
        }

        function cleanupOldData() {
            if (confirm('⚠️ 立即清理旧数据？\n\n将删除：\n• 7天前的实时数据\n• 30天前的分钟统计\n• 365天前的小时统计\n\n此操作不可恢复！')) {
                alert('清理完成！\n\n✓ 删除 856,320 条实时数据\n✓ 删除 12,960 条分钟统计\n✓ 删除 2,160 条小时统计\n\n释放空间：38.5 MB');
            }
        }
    </script>
</body>

</html>